<template>
   <div>
    <div>
      <table>
        <tr>
          <th>序号</th>
          <th>标题</th>
          <th>歌手</th>
          <th>专辑</th>
          <th>时间</th>
        </tr>
      </table>
      <table v-for="(item, i) in state.item" :key="i">
        <tr class="tr1" @dblclick="updatePlay(item)">
          <td class="td1">
            <span>{{ i + 1 }}</span>
          </td>
          <td class="td2">{{ item.name }}</td>
          <td class="td3">{{ item.ar[0].name }}</td>
          <td class="td4">{{ item.al.name }}</td>
          <td class="td5">{{ item.dt }}</td>
        </tr>
      </table>
    </div>
  </div>
  <audio ref="audio" autoplay :src="url"></audio>
</template>

<script>
import { get } from "lodash";
import { ref } from "vue";
import { getSearch, getMusic } from "../request/api/home";
import { onMounted, reactive, watch } from "@vue/runtime-core";
import { useRoute, useRouter } from "vue-router";
export default {
  data() {
    return { bbb: "", state: { item: [] } };
  },
  mounted() {
    this.$route.query;
    console.log(this.$route.query);
    this.acc();
  },
  methods: {
    async acc() {
      let res = await getSearch(this.$route.query.router);
      console.log(res);
      this.state.item = res.data.result.songs;
      console.log(this.state.item);
      this.state.item.filter((res) => {
        res.dt =
          Math.floor(res.dt / 1000 / 60) +
          ":" +
          ((res.dt / 1000 / 60 - Math.floor(res.dt / 1000 / 60)) * 60).toFixed(
            0
          );
      });
    },
    updatePlay:function(item){
      this.$store.commit("pushplayList",item)
      this.$store.commit("updateplayList",this.$store.state.playList.length-1)
      // window.localStorage.setItem("key",this.item);
      // console.log(window.localStorage.getItem("key"));
      sessionStorage.setItem('key',JSON.stringify(item))
      console.log(JSON.stringify(item));
    }

  },


    watch: {
      $route(newVal) {
        console.log(newVal);
        this.$route.query.router=newVal.query.router
        this.acc()
      },
    },


  // setup() {
  //   const router = useRoute();
  //   let bbb="";
  //   const url=ref('');
  //   let aaa = router.query.router;
  //   const state = reactive({
  //     item: [],
  //   });
  //   async function acc() {
  //     let res = await getSearch(aaa);
  //     console.log(res);
  //     state.item = res.data.result.songs;
  //     // console.log(state.item);
  //     state.item.filter((res) => {
  //       res.dt =
  //         Math.floor(res.dt / 1000 / 60) +
  //         ":" +
  //         ((res.dt / 1000 / 60 - Math.floor(res.dt / 1000 / 60)) * 60).toFixed(
  //           0
  //         );
  //     });
  //   }
  //   function adc(id) {

  //     abb(id.id)

  //   }
  //    async function abb(bbb){
  //      let raa=await getMusic(bbb);
  //     console.log(raa);
  //     url.value=raa.data.data[0].url
  //     console.log(url.value);
  //    }

  //   watch(
  //     () => router.query.router,
  //     (newVal) => {
  //       // console.log(newVal);
  //       aaa = newVal;
  //       acc();

  //     }
  //   );

  //   onMounted(() => {
  //     acc();
  //     // abb();
  //   });

  //   return { state, aaa, acc,adc,bbb,url };
  // },
};
</script>

<style>
.search1 {
  width: 88%;
}
th {
  padding: 0px 100px 0px 100px;
}
.tr1 {
  display: flex;
  border-top: solid 1px black;
}
td{
  color: rgb(120, 113, 116);
  display: flex;
  align-items: center;
}
.td1 {
  margin-left: 100px;
  width: 30px;
  height: 70px;
}
.td2 {
  margin-left: 200px;
  width: 150px;
  height: 70px;
}
.td3 {
  margin-left: 83px;
  width: 200px;
  height: 70px;
}
.td4 {
  margin-left: 33px;
  width: 200px;
  height: 70px;
}
.td5 {
  margin-left: 30px;
  width: 200px;
  height: 70px;
}
tr:hover
{ 
background-color:gray;
}
</style>